<template>
  <div class="goods-attr-form">
    <!-- <h1>这里是商品属性组件</h1> -->
    <el-form :model="goodsInfo" label-width="100px">
      <el-form-item label="属性类型">
        <el-select
          v-model="goodsInfo.promotionType"
          placeholder="请选择属性类型"
          @change="getTypeId"
        >
          <el-option
            v-for="(item, index) in attrList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品规格">
        <AttrSp>
          <div slot="attrHead">
            <div class="empty-box" v-if="attrSpList.length == 0"></div>
            <el-form v-else class="attr-form">
              <el-form-item
                v-for="(item, index) in attrSpList"
                :key="index"
                :label="item.name + ':'"
              >
                <br />
                <div v-if="item.inputList.length == 0">
                  <el-input
                    style="width: 200px; margin-right: 10px"
                    v-model="item.iptVal"
                  ></el-input>
                  <el-button>添加</el-button>
                </div>
                <el-checkbox-group v-else v-model="item.attrList">
                  <el-checkbox
                    v-for="(item1, index1) in item.inputList"
                    :key="index1"
                    :label="item1"
                    name="type"
                  ></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </div>
          <el-table-column
            slot="attr-tab"
            v-for="(item, index) in attrSpList"
            :key="index"
            :label="item.name"
            align="center"
          >
          </el-table-column>
        </AttrSp>
      </el-form-item>
      <el-form-item label="商品类型">
        <GoodsType :typeList="typeList"></GoodsType>
      </el-form-item>
      <el-form-item label="商品相册">
        <el-upload
          action=""
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="规格参数">
        <quill-editor style="height:200px;"></quill-editor>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getAttrType, getAttr } from "../../api";
import AttrSp from "./AttrSp.vue";
import GoodsType from "./GoodsType.vue";
export default {
  name: "GoodsAttrForm",
  props: {
    goodsInfo: Object,
  },
  components: {
    AttrSp,
    GoodsType,
  },
  data() {
    return {
      attrList: [],
      attrSpList: [],
      typeList: [],
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  created() {
    getAttrType().then((res) => {
      console.log(res);
      this.attrList = res.data.data;
    });
    // getAttr(1).then(res => {
    //   console.log(res)
    // })
  },
  methods: {
    getTypeId(v) {
      getAttr(v, 0).then((res) => {
        res.data.data.list.forEach((item, index, arr) => {
          item.attrList = [];
          item.iptVal = "";
          if (item.inputList == "") {
            item.inputList = [];
          } else {
            item.inputList = item.inputList.split(",");
          }
        });
        this.attrSpList = res.data.data.list;
        console.log(this.attrSpList);
      });
      getAttr(v, 1).then((res) => {
        res.data.data.list.forEach((item) => {
          item.typeList = "";
          if (item.inputList == "") {
            item.inputList = [];
          } else {
            item.inputList = item.inputList.split(",");
          }
        });
        this.typeList = res.data.data.list;

        console.log(this.typeList);
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style scoped lang="less">
.goods-attr-form{
  height: 3000px;
}
.empty-box {
  height: 40px;
  background: #f8f8f8;
}
.attr-form {
  background: #f8f8f8;
  padding: 0px 20px;
  .el-checkbox-group {
    margin-left: 20px;
  }
}
</style>